<script lang="ts" setup>
import { API } from '@/api/api';
import { ref } from 'vue';
interface DataInfo {
	key: string;
	title: string;
	description: string;
	disabled: boolean;
}


const datas = await API.Query.findPowerWhereList({}, ['_id', 'name']);
const dataList: DataInfo[] = datas.map(data => {
	return {
		key: data._id.toString(),
		title: data.name,
		description: data.name,
		disabled: false,
	}
});

const oriTargetKeys = dataList.filter(item => +item.key % 3 > 1).map(item => item.key);
const disabled = ref<boolean>(false);
const targetKeys = ref<string[]>(oriTargetKeys);
const selectedKeys = ref<string[]>(['1', '4']);
const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
	console.log('targetKeys: ', nextTargetKeys);
	console.log('direction: ', direction);
	console.log('moveKeys: ', moveKeys);
};
const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
	console.log('sourceSelectedKeys: ', sourceSelectedKeys);
	console.log('targetSelectedKeys: ', targetSelectedKeys);
};
const handleScroll = (direction: string, e: Event) => {
	console.log('direction:', direction);
	console.log('target:', e.target);
};

</script>

<template>
	<div>
		<a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys" :data-source="dataList"
			:titles="['权限列表', '我的权限']" :render="item => item.title" :disabled="disabled" @change="handleChange"
			@selectChange="handleSelectChange" @scroll="handleScroll" />
	</div>
</template>